[iOS 10] Safari 10 で Shadow DOM に対応しました

iOS 10

#JavaScript

#HTML5

#iPhone

#iOS

#Safari

深澤豪

2016.11.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Shadow DOM とは

Web Components を構成する要素の一つで DOM ツリーをカプセル化します。例えば意図せず ID や Class が重複してしまうなどの問題に対処します。表示を伴うコンポーネントライブラリの開発に良い効果が期待できそうです。

Shadow DOM について詳しくは HTML5 Rocks [Shadow DOM 201] などを参照してください。

動かしてみる

id='hostElement' に Shadow DOM をぶら下げて表示します。Shadow DOM 内部で定義された id='newText' へは外部から参照出来ない事を確認しています。

動くもの

コード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p id="hostElement"></p>
  <script>
    var shadow = document.querySelector('#hostElement').attachShadow({ mode: 'open' });
    shadow.innerHTML = '<p id=\'newText\'>Shadow DOM として表示中の文字列です</p>';
    if(!document.querySelector('#newText')){
      shadow.innerHTML += '<p>外部から参照できませぬ</p>';
    }
  </script>
</body>
</html>

まとめ

また一つ、 Safari が Chrome に追いついて来たようです。全般的に Chrome が対応した後に Safari と新機能のサポートがされているようですが、現在 Safari を搭載しているのは Apple 製品なので、最新版のOS ≒ Safariの利用率が高く、意外と浸透するのは早そうですね。 ※ Apple は2012年に Windows 版の Safari の提供をやめたようでした。